<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        你好
        <span id="only"></span>
    </div>
    <span></span>
    <!-- <script>
        /*创建*/
        var div = document.createElement('div');//创建元素节点，常用的
        var strong = document.createElement('strong');


        var text = document.createTextNode('邓哥');//创建文本节点

        var comment = document.createComment('this is comment');
        // 创建注释节点


        /*插入页面，两个方法都很常见*/

        // appendChild  可以理解成push，在元素里的最后插入
        
        var div1 = document.getElementsByTagName('div')[0];
        var span = document.createElement('span');
        div1.appendChild(text); // 返回被插入的节点
        div1.appendChild(span);
        div1.appendChild(comment);

        var text1 = document.createTextNode('demo');
        span.appendChild(text1);
        span.appendChild(text);   // 把页面已经有的节点插入到别的地方，是剪切操作


    </script> -->



    <!-- <script>

        var div = document.getElementsByTagName('div')[0];
        var span = document.getElementsByTagName('span')[1];
        div.appendChild(span);
        //把页面已经有的节点插入到别的地方，是剪切操作
    </script> -->




    <script>

        // ParentNode.insertBefore(a, b);
        // insert  a   Before  b
        // 父级调用，往里面插入元素

        var strong = document.createElement('strong');
        var i = document.createElement('i');
        var div = document.getElementsByTagName('div')[0];
        var span = document.getElementsByTagName('span')[0];
        div.insertBefore(strong, span); // 返回被插入的节点

        div.insertBefore(i, strong);
        var span1 = document.getElementsByTagName('span')[1];
        div.insertBefore(span1, i); //仍然是剪切操作


        // 删除节点，都可以用

        // parent.removeChild();
        div.removeChild(i); // 返回删除的节点，也就是把i节点剪切下来了
        // child.remove();
        strong.remove(); // 自我销毁，返回undefined


        // 替换节点，不怎么用

        // parentNode.replaceChild(target, origin)

        var p = document.createElement('p');

       // div.replaceChild(p, span);  //返回span元素，原来的span被剪切出来了


    </script>   



</body>
</html>